<template>
	<Popup height="700rpx">
		<view class="content">
			<view class="head">
				<view class="title">修改签名</view>
				<view class="clear" @click="clearSignature">
					重写
				</view>
			</view>
			<view class="sign-box">
				<l-signature disableScroll ref="signatureRef" penColor="#000" :penSize="5" openSmooth></l-signature>

			</view>

			<view class="bottom-btns">
				<Button3 class="cancel" @click="saveSignature(0)">取消</Button3>
				<Button3 class="primary" @click="saveSignature(1)">提交</Button3>
			</view>
		</view>
		<messageTip ref="myMessage"></messageTip>
	</Popup>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import Popup from '@/components/popup/popup.vue';
	import Button3 from '@/components/button3/button3.vue';
	const emits = defineEmits(['saveSignature'])
	const myMessage = ref()
	const signatureRef = ref()
	const clearSignature = () => {
		// 清空处理
		signatureRef.value.clear()
	}
	// 保存签名
	const saveSignature = (type) => {
		if (type == 1) {
			// emits('saveSignature', nowType.value)
			signatureRef.value.canvasToTempFilePath({
				success(res) {
					console.log('签名信息', res);
					if (!res.isEmpty) {
						// res.tempFilePath
						// clearSignature()
						emits('saveSignature')
					} else {
						myMessage.value.open('error', '请填写您的签名')
					}

				}
			})
		} else {
			emits('saveSignature')
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 48rpx 32rpx 68rpx;

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 42rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.sign-box {
			margin: 32rpx 32rpx 22rpx;
			height: 400rpx;
			background-color: #EFF6FE;
		}

		.bottom-btns {
			display: flex;

			.cancel {
				margin-right: 12rpx;
				width: 226rpx;
			}

			.primary {
				flex: 1;
			}

		}
	}
</style>